<template>
  <div class="desk-app">
    <template v-if="!systemSettingStore.$state.deskAppIconHidden && $route.path === '/default/desk'">
      <ul
        class="app-list"
        :class="[systemSettingStore.$state.deskAppRangeType]"
        ref="appListDom"
        @mousemove="handleDeskAppMousemove"
        @mouseleave="handleDeskAppMouseleave"
      >
        <li
          v-for="item in deskApp"
          :key="item.id"
          :class="[systemSettingStore.$state.deskAppIconSize]"
          :data-desk-app="item.icon"
          :data-task-bar-id="item.id"
        >
          <div
            class="inner"
            :class="{
              checked: item.isChecked,
              running: runningStore.$state.runningTasks.some((child) => item.appId === child.appId)
            }"
            @click.stop="handleCheckedApp(item.id, item.appId, item.icon)"
            @dblclick.stop="handleCreateTask(item.appId, item.icon)"
          >
            <img
              v-if="systemSettingStore.$state.deskAppRangeType === 'win'"
              :src="getImageUrl(`app/${item.icon.trim()}.png`)"
              alt="app-icon"
            />
            <img
              v-else-if="systemSettingStore.$state.deskAppRangeType === 'ios'"
              :src="getImageUrl(`app/${item.iconIos.trim()}.png`)"
              alt="app-icon"
              class="ios-icon"
            />
            <span>{{ item.name }}</span>
          </div>
        </li>
      </ul>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { getImageUrl, sortName } from '@/utils/utils'
import { useDeskAppStore } from '@/stores/systemApp/deskApp'
import { useClickBlankHidden } from '@/hooks'
import { useCreateTask } from '@/hooks/runningTaskHooks'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import type { IDestApp, DeskAppComponent } from '@/stores/systemApp/deskApp'

const WIDTH = 60
const DIS_WIDTH = WIDTH * 5
const appListDom = ref<HTMLElement>()
const deskAppStore = useDeskAppStore()
const systemSettingStore = useSystemSettingStore()
const runningStore = useRunningTasksStore()
const { handleCreateTask } = useCreateTask()

useClickBlankHidden(
  () => appListDom.value,
  () => {
    deskAppStore.resetDeskAppKey('isChecked', false)
  }
)

const deskApp = computed<IDestApp[]>(() => {
  const sort = systemSettingStore.$state.deskAppIconSort
  return deskAppStore.$state.deskAppList.sort((a: IDestApp, b: IDestApp) => {
    const x = a.name
    const y = b.name
    switch (sort) {
      case 'name':
        return sortName(x, y)
      case 'size':
        return a.appSize - b.appSize
      case 'date':
        return a.createTime - b.createTime
      case 'class':
        return sortName(x, y)
      default:
        return sortName(x, y)
    }
  })
})

// 选中桌面 app
const handleCheckedApp = (id: string, taskName: DeskAppComponent, icon?: string) => {
  if (systemSettingStore.$state.deskAppRangeType === 'ios') {
    handleCreateTask(taskName, icon)
    return
  }
  deskAppStore.checkDeskApp(id)
}

// 图标鼠标移动
const handleDeskAppMousemove = (ev: MouseEvent) => {
  if (!appListDom.value || systemSettingStore.$state.deskAppRangeType !== 'ios') return
  const children = Array.from(appListDom.value.children) as HTMLElement[]
  if (children?.length) {
    children.forEach((item: HTMLElement) => {
      const { left, width } = item.getBoundingClientRect()
      let dis = ((DIS_WIDTH - Math.abs(ev.x - (left + width / 2))) / DIS_WIDTH) * WIDTH
      dis = dis < 0 ? 0 : dis
      item.style.width = `${WIDTH + dis}px`
      item.style.height = `${WIDTH + dis}px`
    })
  }
}

// 图标鼠标移动
const handleDeskAppMouseleave = () => {
  if (!appListDom.value || systemSettingStore.$state.deskAppRangeType !== 'ios') return
  const children = Array.from(appListDom.value.children) as HTMLElement[]
  if (children?.length) {
    children.forEach((item: HTMLElement) => {
      item.style.width = ''
      item.style.height = ''
    })
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/mixin';
@import '@/assets/scss/common';

.desk-app {
  width: 100%;
  height: 100%;
  position: relative;

  .app-list {
    display: inline-block;
    position: relative;

    &.ios {
      display: flex;
      align-items: flex-end;
      position: fixed;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      height: 70px;
      padding: 5px 0;
      border-radius: 20px;
      box-sizing: border-box;
      background-color: var(--task-bar-bg-color);
      backdrop-filter: blur(10px);

      li {
        margin: 0 5px;
        width: 60px;
        height: 60px;
        transform-origin: bottom center;

        .inner {
          width: 100%;
          height: 100%;
          position: relative;

          &.running {
            &::after {
              content: '';
              position: absolute;
              left: 50%;
              bottom: -3px;
              transform: translateX(-50%);
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background-color: #ccc;
            }
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }

          span {
            display: none;
          }
        }
      }
    }

    &.win {
      box-sizing: border-box;
      width: auto;
      height: 100%;
      display: inline-flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 10px;

      li {
        text-align: center;
        color: #fff;
        word-break: break-word;
        transition: all 0.5s $cubic;

        &.min {
          width: 78px;
          height: 72px;

          img {
            width: 34px;
            height: 34px;
          }
        }

        &.mid {
          width: 78px;
          height: 90px;

          img {
            width: 50px;
            height: 50px;
          }
        }

        &.big {
          width: 106px;
          height: 136px;

          img {
            width: 98px;
            height: 98px;
          }
        }

        .inner {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border: 1px solid transparent;
          box-sizing: border-box;

          &:hover:not(.checked),
          &.checked {
            border-color: rgba(255, 255, 255, 0.8);
            @include hover-model;
          }

          &.checked:hover {
            border-color: rgba(255, 255, 255, 0.8);

            &:after {
              display: none;
            }
          }

          img {
            object-fit: contain;
            object-position: center center;
            transition: all 0.5s $cubic;
          }

          span {
            display: inline-block;
            height: calc(100% - 34px);
            text-shadow: 0 2px 2px #000;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}
</style>
